<template>
	<view class="main">
		<!-- <my-back-home title="成员信息" urlBack='/pages/team/myTeam'></my-back-home> -->
		<view class="empty"></view>
		<empty-team text="未查询到相关成员" :emptyImg="searchEmpty" v-if="empty"></empty-team>
		<view class="card"  v-if="!empty">
			<view class="avatar" v-if="avatar.length > 0">
				<view class="aTitle">
					头像
				</view>
				<view class="av_img">
					<view class="img_box">
						<u-avatar :src="avatar" size="120"></u-avatar>
					</view>
				</view>
			</view>
			<view class="avatar" v-if="avatar.length == 0">
				<view class="aTitle">
					头像
				</view>
				<view class="av_img">
					<view class="default_letter" :class="{man:form.sex == '0',women:form.sex !== '0'}">
						{{form.name.slice(0,1)}}
					</view>
				</view>
			</view>
			<view class="hosp_sp">
				<view class="hosp_sp_left">
					姓名
				</view>
				<view class="hosp_sp_right">
					{{form.name}}
				</view>
			</view>
			<view class="hosp_sp">
				<view class="hosp_sp_left">
					性别
				</view>
				<view class="hosp_sp_right">
					{{sex == 0 ? '男' : '女' }}
				</view>
			</view>
			<view class="hosp_sp">
				<view class="hosp_sp_left">
					医院
				</view>
				<view class="hosp_sp_right">
					{{form.hosp}}
				</view>
			</view>
			<view class="hosp_sp">
				<view class="hosp_sp_left">
					科室
				</view>
				<view class="hosp_sp_right">
					{{dep}}
				</view>
			</view>
			<view class="hosp_sp">
				<view class="hosp_sp_left">
					职称
				</view>
				<view class="hosp_sp_right">
					{{job}}
				</view>
			</view>
			<view class="hosp_sp">
				<view class="hosp_sp_left">
					手机号
				</view>
				<view class="hosp_sp_right">
					{{phoneNumber}}
				</view>
			</view>

		</view>
		<view class="delete" @click="deleted" v-if="!empty">
			删除团队成员
		</view>
		<u-modal v-model="showNoDel" :content="noDelete" :show-title="false" confirm-color="#4DC0D9"></u-modal>
		<u-modal v-model="showDelete" :show-title="false" cancel-color="#333333" :show-cancel-button="true"
			confirm-color="#4DC0D9" :content-style="{color:'#333333'}" :content="content"
			@confirm="confirmDelete" :cancel-style="{'borderRight':'1px solid #f8f8f8'}"></u-modal>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		zhicheng,
		userInfoPost,
		getDepList,
		getInfo,
		getUserInfoByUserId,
		delTeamUser
	} from '@/api/index.js'
	import {
		baseURL
	} from '@/config/app'
	export default {
		data() {
			return {
				showNoDel:false,
				noDelete:'',
				empty:false,
				searchEmpty:require('@/static/img/member_empty.png'),
				showDelete: false,
				content: '确定要把该用户从团队成员中删除吗？',
				placeholder: '"color": "red"',
				form: {
					name: '',
					sex: '',
					hosp: '',
					dep: '', //科室
					job: '', //职称
					phoneNumber: ''
				},
				sex: '',
				dep: '', //科室
				depArr: '',
				jobArr: '',
				job: '', //职称
				depList: [{
						value: '1',
						label: '精神科'
					},
					{
						value: '2',
						label: '耳鼻喉'
					},
					{
						value: '3',
						label: '眼科'
					}
				],
				JobList: [],
				list: [{
						value: '0',
						label: '男'
					},
					{
						value: '1',
						label: '女'
					}
					// ,{
					// 	value: '2',
					// 	label: '未知'
					// }
				],
				show: false, //性别
				keshi: false, //科室
				zhicheng: false, //职称
				avatar: require('@/static/img/default_avatar.png'),
				filePath: '', //
				myX: require('@/static/img/myX.png'),
				delParams:{
					teamId:'',
					userId:''
				}
			}
		},
		async onLoad(obj) {
			//console.log(obj,'obj');
			if(this.$store.state.doc.teamId){
				this.delParams.teamId = this.$store.state.doc.teamId
			}
			if(obj.userId){
				this.delParams.userId = obj.userId
				await this.getJobList()
				await this.getUserInfo(obj.userId)
			}else{
				this.$u.toast('没有用户ID!!')
			}
			//this.empty = true
		},
		computed: {
			phoneNumber() {
				if (this.form.phoneNumber) {
					return this.form.phoneNumber.slice(0, 3) + '****' + this.form.phoneNumber.slice(7, 11)
				}
			}
		},
		methods: {
			async getUserInfo(userId){
				let res = await getUserInfoByUserId(userId)
				this.form.name = res.data.nickName
				this.avatar = res.data.avatar
				 this.form.hosp = res.data.corpName
				this.sex = res.data.sex
				this.form.phoneNumber = res.data.phoneNumber
				this.dep = res.data.deptName
				let myjob = this.JobList.find(v=>v.value == res.data.userTitle)
				if(myjob !== undefined){
					this.job = myjob.label
				}
				//console.log(res,'user');
			},
			async getJobList() {
				// let that = this
				let res = await zhicheng('user_title') //职称列表
				this.JobList = res.data.map((v) => {
					return {
						value: v.dictValue,
						label: v.dictLabel
					}
				})
				//	console.log(this.JobList); 
				//await this.DepList() //获得科室列表
			},
			async DepList() {
				let res = await getDepList()
				this.depList = res.data.map((v) => {
					return {
						value: v.deptId,
						label: v.deptName
					}
				})
			},
			async delUser(){
				//console.log(this.delParams,123331);
				let res = await delTeamUser(this.delParams)
				//console.log(res);
				if(res.code == 200){
					this.$u.toast('删除成功')
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/team/myTeam'
						})
					},1000)
				}else{
					if(!res.msg.includes('负责人')){  //不是负责人的报错要弹出来
						//this.$u.toast(res.msg+111)
					}
					this.showNoDel = true
					this.noDelete = res.msg
				}
			
			},
			
			confirmDelete() {
				if(this.delParams.teamId && this.delParams.userId){
					this.delUser()
				}else{
					this.$u.toast('未找到teamId或者userId')
				}
			},
			async deleted() {
				this.showDelete = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		position: absolute;
		height: 100vh;
		width: 100vw;
		background-color: #F8F8F8;

		.empty {
			width: 100%;
			height: 20rpx;
			background: #F8F8F8;
		}

		.card {
			background-color: white;
			//margin-top: 20rpx;
			background: white;
			padding: 0 24rpx 0 24rpx;
			//background: #F8F8F8;

			.avatar {
				//border-bottom: 1px solid rgb(228, 231, 237);
				border-bottom: 1px solid #F8F8F8;
				display: flex;
				align-items: center;

				.aTitle {
					font-family: PingFang SC, PingFang SC;
					//font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
					//padding-bottom: 20rpx;
				}

				.av_img {
					flex: 1;
					padding-left: 100rpx;
					padding-top: 16rpx;
					padding-bottom: 20rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.img_box {
						margin-right: 10rpx;
						// width: 120rpx;
						// height: 120rpx;
					}

					.default_letter {
						width: 120rpx;
						height: 120rpx;

						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.man {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 60rpx;
						color: #4DC0D9;
						line-height: 70rpx;
						background-color: #A6DFEC;
					}

					.women {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 60rpx;
						color: #F1280D;
						line-height: 70rpx;
						background-color: #FFEBEB;
					}
				}
			}

			.hosp_sp {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0 20rpx 0;
				border-bottom: 1px solid #F8F8F8;

				.hosp_sp_left {
					//padding-left: 20rpx;
					font-family: PingFang SC, PingFang SC;
					//font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
				}

				.hosp_sp_right {
					font-size: 32rpx;
					color: #C1C1C1;
					line-height: 28rpx;
				}
			}

		}

		.delete {
			background-color: #FFFFFF;
			text-align: center;
			margin-top: 20rpx;
			padding-right: 36rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			font-family: PingFang SC, PingFang SC;
			//font-weight: 500;
			font-size: 32rpx;
			color: #F1280D;
			line-height: 38rpx;
		}
	}
</style>